﻿<!DOCTYPE html>
<html>
<head>
    <title>APIJSON.NET</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="APIJSON.NET" />
    <meta name="description" content="APIJSON.NET" />
    <link href="css/hint.min.css" rel="stylesheet">
    <!-- <link href="css/diffview.css" rel="stylesheet"> -->
    <link href="css/loading.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <div class="side-top">
            <a class="logo" href="/">
                <span class="on">APIJSON</span><span>.NET</span>
            </a>
            <span class="slogan">
               
            </span>

            <div class="top-right">
                <a href="https://github.com/liaozb/APIJSON.NET" target="_blank">
                    已开源在 GitHub 上
                </a>
            </div>
        </div>

        <div :class="'side-left side-view-' + baseview">
            <div class="right-bar">
                <select id="rest-url">
                    <option value="get">get</option>
                    <option value="add">add</option>
                    <option value="edit">edit</option>
                    <option value="remove">remove</option>
                     
                </select>
                <button @click="hpost()">发送请求</button>
            </div>
            <div class="left-panel">

                <textarea v-model="jsoncon" style="padding-top:40px;" id="vInput"></textarea>
                <div class="label" v-show="baseview == 'diff'">原 JSON</div>
            </div>
            <div class="left-panel" v-show="baseview == 'diff'">

                <textarea v-model="newjsoncon"></textarea>
                <div class="label">新 JSON</div>
            </div>
        </div>

        <div class="splitx"></div>

        <div class="side-right">
            <div class="right-inner">
                <div class="right-bar">
                    <div class="pull-left">
                        <a href="javascript:void(0)" @click="compress()" class="hint--top" data-hint="压缩">
                            <svg v-bind:class="'icon  active-' + (view == 'compress')">
                                <use xlink:href="svg/icon.svg#database"></use>
                            </svg>
                        </a>

                        <a href="javascript:void(0)" class="hint--top" data-hint="美化" @click="beauty()">
                            <svg class="icon">
                                <use xlink:href="svg/icon.svg#beauty"></use>
                            </svg>
                        </a>

                        <a href="javascript:void(0)" class="hint--top" data-hint="清空" @click="clearAll()">
                            <svg class="icon">
                                <use xlink:href="svg/icon.svg#clear"></use>
                            </svg>
                        </a>

                        <a href="javascript:void(0)" class="hint--top" data-hint="导出文本文件" @click="isExportTxtShow = true">
                            <svg class="icon">
                                <use xlink:href="svg/icon.svg#export-txt"></use>
                            </svg>
                        </a>

                        <a href="javascript:void(0)" class="hint--top" data-hint="全部展开" @click="expandAll()">
                            <svg class="icon">
                                <use xlink:href="svg/icon.svg#expand"></use>
                            </svg>
                        </a>

                        <a href="javascript:void(0)" class="hint--top" data-hint="全部折叠" @click="collapseAll()">
                            <svg class="icon">
                                <use xlink:href="svg/icon.svg#collapse"></use>
                            </svg>
                        </a>
                    </div>
                    <div class="pull-right">
                        <div class="loader" v-show="isSharing">
                            <div class="ball-pulse-sync">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>

                        <a class="hint--top save-tool copy-btn" data-hint="分享" href="javascript:void(0)" @click="share" data-clipboard-target="#share-input" v-show="!isSharing">
                            <svg class="icon">
                                <use xlink:href="svg/icon.svg#share"></use>
                            </svg>
                        </a>

                        <span class="pop-btn" v-show="historys.length > 0">
                            <a class="hint--top" data-hint="历史保存" href="javascript:void(0)">
                                <svg class="icon">
                                    <use xlink:href="svg/icon.svg#record"></use>
                                </svg>
                            </a>
                            <ul class="historys pop">
                                <li v-for="(his, index) in historys">
                                    <a href="javascript:void(0)" @click="restore(his)"> {{his.name}}</a>

                                    <svg class="icon" @click="remove(his, index)">
                                        <use xlink:href="svg/icon.svg#trash"></use>
                                    </svg>
                                </li>
                            </ul>
                        </span>
                        <a class="hint--top save-tool" data-hint="保存" href="javascript:void(0)" @click="isSaveShow = true">
                            <svg class="icon">
                                <use xlink:href="svg/icon.svg#save"></use>
                            </svg>
                        </a>

                        <span class="pop-btn">
                            <a class="hint--top" data-hint="换肤" href="javascript:void(0)" @click="isThemeShow = true">
                                <svg class="icon">
                                    <use xlink:href="svg/icon.svg#theme"></use>
                                </svg>
                            </a>
                            <div class="themes pop">
                                <div :class="'theme-item ' + (index === checkedTheme)" v-for="(theme, index) in themes" @click="switchTheme(index)">
                                    <span class="theme-color" v-for="color in theme" :style="{backgroundColor: color}"></span>
                                </div>
                            </div>
                        </span>
                    </div>

                    <!-- 用作复制的隐藏文本域 -->
                    <div style="position: absolute; top: -100000px">
                        <input id="share-input" :value="shareUrl(shareKey)">
                    </div>
                </div>


                <!--格式化视图-->
                <div class="right-main" v-show="baseview == 'formater' && view != 'error'">

                    <!--正常JSON格式化视图-->
                    <div class="view-code" v-show="view == 'code'">
                        <vue-outer :jsondata="jsonhtml" isend="true" :theme="theme"></vue-outer>
                    </div>

                    <!--空视图-->
                    <div class="view-code" v-show="view == 'empty'">
                    </div>

                    <!--压缩视图-->
                    <textarea v-show="view == 'compress'">{{compressStr}}</textarea>

                </div>


                <!--格式化错误视图-->
                <div class="view-error" v-show="view == 'error'">
                    <pre v-cloak>{{error.msg}}</pre>
                </div>

                <!--diff视图-->
                <!-- <div id="diffoutput" v-show="baseview == 'diff' && view != 'error'">

                </div> -->

            </div>
        </div>

        <!--弹出保存框-->
        <div class="save-box" v-show="isSaveShow">
            <svg class="icon close-icon" @click="isSaveShow = false">
                <use xlink:href="svg/icon.svg#close"></use>
            </svg>

            <input type="text" placeholder="请输入辨识名称" v-model="history.name" />
            <button @click="save()">保存</button>
        </div>

        <!--弹出下载文本框-->
        <div class="save-box" v-show="isExportTxtShow">
            <svg class="icon close-icon" @click="isExportTxtShow = false">
                <use xlink:href="svg/icon.svg#close"></use>
            </svg>

            <label>.txt</label>

            <input type="text" placeholder="请输入辨识名称" v-model="exTxt.name" />
            <button @click="exportTxt()">下载</button>
        </div>

    </div>

    <!--用于移动的时候遮住文本域 避免被选中-->
    <div class="widnow-cover">
    </div>



    <!--最外层根结构-->
    <script type="text/x-template" id="outer-template">
        <ul class="json-item">
            <vue-val :val="jsondata" :isend="isend" :theme="theme"></vue-val>
        </ul>
    </script>

    <!--内层每个键值对-->
    <script type="text/x-template" id="item-template">
        <ul class="json-item">
            <vue-val :field="key" :theme="theme" :val="val" :isend="index == objLength(jsondata) - 1" v-for="(val, key, index) in jsondata"></vue-val>
        </ul>
    </script>

    <!--key value 最终的渲染方式-->
    <script type="text/x-template" id="val-template">
        <div class="keyval">
            <template v-if="!isObjectArr(val)">
                <span class="key" v-show="field" v-bind:style="{color: theme.key}">"{{field}}": </span>
                <span v-bind:class="'val val-' + getTyp(val)" v-bind:style="{color: theme[getTyp(val)]}">
                    <span v-if="!isaLink(val)">{{formatVal(val)}}</span>
                    <a v-if="isaLink(val)" :href="val" target="_blank" class="json-link" :style="{color: theme['link-link']}">{{formatVal(val)}}</a>
                    <span v-if="!isend">,</span>
                </span>
            </template>


            <!--key + 展开折叠ICON-->
            <template v-if="isObjectArr(val)">
                <span class="key" v-bind:style="{color: theme.key}" v-show="field">"{{field}}": </span>
                <vue-expand></vue-expand>
            </template>


            <!--值为对象时-->
            <template v-if="getTyp(val) == 'Object'">
                <span class="expand-view">
                    <span>{</span>
                    <vue-item :jsondata="val" :theme="theme"></vue-item>
                    <div class="brace-end">}<span v-if="!isend">,</span></div>
                </span>

                <span class="fold-view">{{getTyp(val)}}{<label class="ex-alia" @click="expand($event)">{{objLength(val)}}</label>}<span v-if="!isend">,</span></span>
            </template>


            <!--值为数组时-->
            <template v-if="getTyp(val) == 'Array'">
                <span class="expand-view">
                    <span>[</span>
                    <span class="val">
                        <vue-outer :jsondata="sub" v-for="(sub, index) in val" :isend="index == val.length - 1" :theme="theme"></vue-outer>
                    </span>
                    <div class="brace-end">]<span v-if="!isend">,</span></div>
                </span>

                <span class="fold-view">{{getTyp(val)}}[<label class="arrlen ex-alia" @click="expand($event)">{{val.length}}</label>]<span v-if="!isend">,</span></span>

            </template>
        </div>
    </script>

    <!--展开 折叠的 UI 组件-->
    <script type="text/x-template" id="expand-template">
        <span class="expand-wraper">
            <svg class="icon icon-square icon-square-min" @click="fold($event)" title="折叠">
                <use xlink:href="svg/icon.svg#minus-square"></use>
            </svg>

            <svg class="icon icon-square icon-square-plus" @click="expand($event)" title="展开">
                <use xlink:href="svg/icon.svg#plus-square"></use>
            </svg>
        </span>
    </script>




    <script src="js/vue.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jsonlint.js"></script>
    <script src="js/parse.js"></script>
    <script src="js/editor.js"></script>
    <!-- <script src="js/diffview.js"></script> -->
    <script src="js/localforage.min.js"></script>
    <script src="js/FileSaver.js"></script>
    <script src="js/uuid.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/helper.js"></script>
    <script src="js/main.js"></script>

    <!--访问统计  请换成自己的-->
    <script>

    </script>

</body>
</html>
